<template>
    <div class="page">
        <el-row>
            <el-row :gutter="20">
                <el-col :span="16" class="left">
                    <blog :postId="postId"></blog>
                    <comments :postId="postId"></comments>
                </el-col>
                <el-col :span="8" class="right">
                    <rank></rank>
                    <tags></tags>
                    <spread></spread>
                </el-col>
        </el-row>
        </el-row>
    </div>
</template>

<script>
    import blog from '@/components/blog'
    import rank from '@/components/rank'
    import comments from '@/components/comments'
    import tags from '@/components/tags'
    import spread from '@/components/spread'
    export default{
        props:['postId'],
        name: 'page_2',
        data () {
            return {
                msg: 'page_2'
            }
        },
        components: {
            'blog':blog,
            'rank':rank,
            'comments':comments,
            'tags':tags,
            'spread':spread
        }
    }
</script>

<style>
    .page{
        height: 100%;
        padding: 24px 57px;
    }
    .elem-quote{
        /*margin-bottom: 10px;*/
        padding: 15px;
        line-height: 22px;
        border-left: 5px solid #009688;
        border-radius: 0 2px 2px 0;
        background-color: #f2f2f2;
    }
    hr{
        height: 1px;
        margin: 5px 0;
        border: 0;
        clear: both;
        background: #e6e6e6;
    }
</style>